<template>
  <BasePage title="辅导员上报记录" description="查看学院辅导员上报情况">
    <!-- 筛选条件 -->
    <div class="bg-white rounded-lg shadow-sm p-4 mb-4">
      <div class="grid grid-cols-2 gap-3">
        <div>
          <label class="block text-sm text-gray-600 mb-1">辅导员</label>
          <select v-model="filters.counselor" class="w-full p-2 border border-gray-300 rounded-md text-sm">
            <option value="">全部辅导员</option>
            <option v-for="counselor in counselorOptions" :key="counselor.id" :value="counselor.id">
              {{ counselor.name }}
            </option>
          </select>
        </div>
        <div>
          <label class="block text-sm text-gray-600 mb-1">上报状态</label>
          <select v-model="filters.status" class="w-full p-2 border border-gray-300 rounded-md text-sm">
            <option value="">全部状态</option>
            <option value="reported">已上报</option>
            <option value="unreported">未上报</option>
          </select>
        </div>
        <div>
          <label class="block text-sm text-gray-600 mb-1">开始日期</label>
          <input 
            type="date" 
            v-model="filters.startDate" 
            class="w-full p-2 border border-gray-300 rounded-md text-sm"
          >
        </div>
        <div>
          <label class="block text-sm text-gray-600 mb-1">结束日期</label>
          <input 
            type="date" 
            v-model="filters.endDate" 
            class="w-full p-2 border border-gray-300 rounded-md text-sm"
          >
        </div>
      </div>
      <div class="mt-4">
        <button 
          @click="applyFilters" 
          class="w-full py-2 bg-green-500 text-white rounded-lg font-medium hover:bg-green-600 transition-colors"
        >
          查询
        </button>
      </div>
    </div>
    
    <!-- 上报统计 -->
    <div class="bg-white rounded-lg shadow-sm p-4 mb-4">
      <h3 class="text-base font-medium text-gray-800 mb-3">上报统计</h3>
      <div class="grid grid-cols-3 gap-3">
        <div class="bg-blue-50 p-3 rounded-lg text-center">
          <div class="text-blue-500 font-medium">{{ stats.total }}</div>
          <div class="text-xs text-gray-500 mt-1">总记录数</div>
        </div>
        <div class="bg-green-50 p-3 rounded-lg text-center">
          <div class="text-green-500 font-medium">{{ stats.reported }}</div>
          <div class="text-xs text-gray-500 mt-1">已上报</div>
        </div>
        <div class="bg-red-50 p-3 rounded-lg text-center">
          <div class="text-red-500 font-medium">{{ stats.unreported }}</div>
          <div class="text-xs text-gray-500 mt-1">未上报</div>
        </div>
      </div>
    </div>
    
    <!-- 记录列表 -->
    <BaseList 
      :items="reportRecords" 
      :loading="loading" 
      :has-more="hasMore"
      @load-more="loadMore"
      empty-text="暂无上报记录"
    >
      <template #item="{ item }">
        <div class="bg-white rounded-lg shadow-sm p-4 mb-3">
          <div class="flex justify-between items-start">
            <div>
              <div class="font-medium text-gray-800">{{ item.counselorName }}</div>
              <div class="text-sm text-gray-500 mt-1">{{ item.department }}</div>
            </div>
            <div :class="[item.status === 'reported' ? 'bg-green-100 text-green-600' : 'bg-red-100 text-red-600', 'px-2 py-1 rounded-full text-xs']">
              {{ item.status === 'reported' ? '已上报' : '未上报' }}
            </div>
          </div>
          
          <div class="mt-3 text-sm text-gray-600">
            <div class="flex justify-between py-1 border-b border-gray-100">
              <span>上报日期</span>
              <span>{{ item.date }}</span>
            </div>
            <div class="flex justify-between py-1 border-b border-gray-100">
              <span>上报时间</span>
              <span>{{ item.status === 'reported' ? item.reportTime : '-' }}</span>
            </div>
            <div class="flex justify-between py-1">
              <span>学生人数</span>
              <span>{{ item.studentCount }}</span>
            </div>
          </div>
          
          <div v-if="item.status === 'unreported'" class="mt-3">
            <button 
              @click="sendReminder(item)" 
              class="w-full py-1.5 bg-blue-500 text-white rounded-lg text-sm hover:bg-blue-600 transition-colors"
            >
              发送提醒
            </button>
          </div>
        </div>
      </template>
    </BaseList>
    
    <!-- 提醒成功提示 -->
    <div v-if="showReminderSuccess" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center p-4 z-50">
      <div class="bg-white rounded-lg max-w-sm w-full p-5 text-center">
        <div class="w-16 h-16 bg-green-100 rounded-full flex items-center justify-center mx-auto mb-4">
          <CheckCircle class="w-8 h-8 text-green-500" />
        </div>
        <h3 class="text-lg font-medium text-gray-800 mb-2">提醒已发送</h3>
        <p class="text-gray-600 mb-4">已成功向辅导员发送上报提醒</p>
        <button 
          @click="showReminderSuccess = false" 
          class="w-full py-2 bg-green-500 text-white rounded-lg font-medium hover:bg-green-600 transition-colors"
        >
          确定
        </button>
      </div>
    </div>
  </BasePage>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue';
import BasePage from '../../components/BasePage.vue';
import BaseList from '../../components/BaseList.vue';
import { CheckCircle } from 'lucide-vue-next';

// 辅导员选项
const counselorOptions = [
  { id: '1', name: '李辅导员' },
  { id: '2', name: '王辅导员' },
  { id: '3', name: '张辅导员' },
  { id: '4', name: '赵辅导员' },
  { id: '5', name: '刘辅导员' }
];

// 筛选条件
const filters = ref({
  counselor: '',
  status: '',
  startDate: '',
  endDate: ''
});

// 记录列表
const reportRecords = ref([]);
const loading = ref(false);
const hasMore = ref(true);
const page = ref(1);
const showReminderSuccess = ref(false);

// 统计数据
const stats = computed(() => {
  const total = reportRecords.value.length;
  const reported = reportRecords.value.filter(record => record.status === 'reported').length;
  return {
    total,
    reported,
    unreported: total - reported
  };
});

// 加载记录
const loadRecords = async () => {
  loading.value = true;
  
  // 模拟API请求
  await new Promise(resolve => setTimeout(resolve, 1000));
  
  // 模拟数据
  const mockData = [
    {
      id: '1',
      counselorName: '李辅导员',
      department: '计算机科学与技术',
      status: 'reported',
      date: '2023-05-15',
      reportTime: '08:30',
      studentCount: 45
    },
    {
      id: '2',
      counselorName: '王辅导员',
      department: '软件工程',
      status: 'reported',
      date: '2023-05-15',
      reportTime: '08:45',
      studentCount: 38
    },
    {
      id: '3',
      counselorName: '张辅导员',
      department: '人工智能',
      status: 'unreported',
      date: '2023-05-15',
      reportTime: '',
      studentCount: 42
    },
    {
      id: '4',
      counselorName: '赵辅导员',
      department: '网络工程',
      status: 'reported',
      date: '2023-05-15',
      reportTime: '09:10',
      studentCount: 36
    },
    {
      id: '5',
      counselorName: '刘辅导员',
      department: '信息安全',
      status: 'unreported',
      date: '2023-05-15',
      reportTime: '',
      studentCount: 40
    }
  ];
  
  // 应用筛选条件
  let filteredData = [...mockData];
  
  if (filters.value.counselor) {
    const counselorName = counselorOptions.find(c => c.id === filters.value.counselor)?.name;
    filteredData = filteredData.filter(record => record.counselorName === counselorName);
  }
  
  if (filters.value.status) {
    filteredData = filteredData.filter(record => record.status === filters.value.status);
  }
  
  // 添加到记录列表
  if (page.value === 1) {
    reportRecords.value = filteredData;
  } else {
    reportRecords.value = [...reportRecords.value, ...filteredData];
  }
  
  // 更新加载状态
  loading.value = false;
  hasMore.value = page.value < 3; // 模拟只有3页数据
};

// 应用筛选条件
const applyFilters = () => {
  page.value = 1;
  loadRecords();
};

// 加载更多
const loadMore = () => {
  if (loading.value || !hasMore.value) return;
  page.value++;
  loadRecords();
};

// 发送提醒
const sendReminder = async (record) => {
  // 模拟API请求
  await new Promise(resolve => setTimeout(resolve, 800));
  
  // 显示成功提示
  showReminderSuccess.value = true;
  
  // 在实际应用中，这里会发送请求到后端发送提醒
  console.log('已发送提醒给:', record.counselorName);
};

// 初始加载
onMounted(() => {
  loadRecords();
});
</script>